<!--
 * @Author: gyc
 * @Date: 2020-05-23 10:18:52
 * @LastEditTime: 2020-07-10 13:41:40
 * @Description: Nuxt测试版
--> 
<template>
  <div class="mo-share">
    <div class="mo-share-main">
      <div class="share-main-ctl">
        <span>
          最新
          <Icon type="md-arrow-dropdown" size="16" />
          <div class="ctl-sel"></div>
        </span>
        <span>今日热门</span>
        <span>本周热门</span>
      </div>
      <share-box v-for="i in 6" :key="i" class="share-box"></share-box>
    </div>
    <div class="mo-share-right">
      <share-tag></share-tag>
      <share-aside></share-aside>
    </div>
  </div>
</template>

<script>
import shareBox from "@/components/share/shareBox/shareBox2";
import shareAside from "@/components/share/shareAside/shareAside";
import shareTag from "@/components/share/shareTag/tag";
export default {
  name: "moShare",
  layout: "dpage",
  components: {
    "share-aside": shareAside,
    "share-box": shareBox,
    "share-tag": shareTag
  }
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 992px) {
  .mo-share-right {
    display: none;
  }
  .mo-share-main {
    margin-right: 5px;
  }
}
.mo-share {
  display: flex;
  width: 100%;
  min-height: 100vh;
  justify-content: center;
  background-color: white;
  .mo-share-left {
    min-height: 10px;
  }
  .mo-share-right {
    position: relative;
    min-width: 275px;
    min-height: 10px;
    padding-left: 5px;
    padding-right: 10px;
  }
  .mo-share-main {
    width: 851px;
    height: 100%;
    padding-left: 10px;
    padding-right: 5px;
    .share-main-ctl {
      display: flex;
      padding-left: 10px;
      padding-top: 20px;
      padding-bottom: 10px;
      span {
        position: relative;
        cursor: pointer;
        margin-right: 20px;
        &:hover {
          color: $gcolor;
        }
        &:nth-of-type(1) {
          color: black;
        }
      }
    }
    .share-box {
      &:not(:nth-last-of-type(1)) {
        margin-bottom: 10px;
      }
    }
    .share-main-tag {
      display: flex;
      background-color: white;
      padding: 5px;
      margin-bottom: 10px;
      border-radius: 4px;
      height: 35px;
      align-items: center;
      margin-top: 10px;
      span {
        margin-right: 4px;
        margin-left: 5px;
        cursor: pointer;
        &:hover {
          color: $gcolor;
        }
      }
    }
  }
}
</style>